<!--宿舍考勤-->
<template>
    <div class="dormitory-box">
        <div>
            <h4 class="text">学生考勤时段</h4>
            <el-button type="primary" @click="toMarkDown">考勤时段设置</el-button>
        </div>
            <div class="interval">
                <h4>06:00-07:35</h4>
                <h4>今日已考勤</h4>
            </div>
            <div class="interval">
                <h4>12:00-13:20</h4>
                <h4>今日已考勤</h4>
            </div>
            <div class="interval">
                <h4>13:50-14:25</h4>
                <h4>今日已考勤</h4>
            </div>
            <div class="interval">
                <h4>16:00-19:30</h4>
                <h4>今日已考勤</h4>
            </div>
            <div class="interval in">
                <h4>20:30-21:00</h4>
                <h4>考勤中</h4>
            </div>
            <div class="interval wait">
                <h4>22:10-22:40</h4>
                <h4>今日待考勤</h4>
            </div>

<!--        学生当前时段考勤概况-->
        <h4 class="current">学生当前时段考勤概况(点击对应即可查看详情列表)</h4>
        <div class="big-box">
<!--            已考勤-->
            <div class="bg-box attendance zh">
                <i class="icon-yingyong sty"></i>
            </div>
            <div class="information zh">
                <p>已考勤人数</p>
                <h3>1526人</h3>
            </div>
<!--            迟到考勤-->
            <div class="bg-box attendance zh late">
                <i class="icon-liucheng3 sty"></i>
            </div>
            <div class="information zh">
                <p>迟到考勤人数</p>
                <h3>23人</h3>
            </div>
<!--            缺勤-->
            <div class="bg-box attendance zh absence">
                <i class="icon-liucheng sty"></i>
            </div>
            <div class="information zh">
                <p>缺勤人数</p>
                <h3>12人</h3>
            </div>
<!--            应考勤-->
            <div class="bg-box attendance zh answer">
                <i class="icon-liucheng1 sty"></i>
            </div>
            <div class="information zh">
                <p>应勤人数</p>
                <h3>1652人</h3>
            </div>
        </div>


<!--        学生当天考勤概况-->
        <h4 class="current">学生当天考勤概况</h4>
        <div class="big-box">
            <!--            已考勤-->
            <div class="bg-box attendance zh">
                <i class="icon-yingyong sty"></i>
            </div>
            <div class="information zh">
                <p>已考勤人数</p>
                <h3>8526人</h3>
            </div>
            <!--            迟到考勤-->
            <div class="bg-box attendance zh late">
                <i class="icon-liucheng3 sty"></i>
            </div>
            <div class="information zh">
                <p>迟到考勤人数</p>
                <h3>46人</h3>
            </div>
            <!--            缺勤-->
            <div class="bg-box attendance zh absence">
                <i class="icon-liucheng sty"></i>
            </div>
            <div class="information zh">
                <p>缺勤人数</p>
                <h3>23人</h3>
            </div>
            <!--            应考勤-->
            <div class="bg-box attendance zh answer">
                <i class="icon-liucheng1 sty"></i>
            </div>
            <div class="information zh">
                <p>应勤人数</p>
                <h3>9652人</h3>
            </div>
        </div>


<!--        学生当月考勤概况-->
        <h4 class="current">学生当月考勤概况</h4>
        <div class="big-box">
            <!--            已考勤-->
            <div class="bg-box attendance zh">
                <i class="icon-yingyong sty"></i>
            </div>
            <div class="information zh">
                <p>已考勤人数</p>
                <h3>1028526人</h3>
            </div>
            <!--            迟到考勤-->
            <div class="bg-box attendance zh late">
                <i class="icon-liucheng3 sty"></i>
            </div>
            <div class="information zh">
                <p>迟到考勤人数</p>
                <h3>469人</h3>
            </div>
            <!--            缺勤-->
            <div class="bg-box attendance zh absence">
                <i class="icon-liucheng sty"></i>
            </div>
            <div class="information zh">
                <p>缺勤人数</p>
                <h3>293人</h3>
            </div>
            <!--            应考勤-->
            <div class="bg-box attendance zh answer">
                <i class="icon-liucheng1 sty"></i>
            </div>
            <div class="information zh">
                <p>应勤人数</p>
                <h3>199652人</h3>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "dormitory",
        computed: {
            ...mapGetters(['permissions']),
        },
        methods:{
            toMarkDown:function () {
                this.$router.replace('time')
            }
        }
    }
</script>

<style scoped>
    .text{
        display: inline-block;
        margin: 0 15px 0 20px;
    }
    .interval{
        width: 200px;
        height: 100px;
        border-radius: 15px;
        border: 1px solid #bbb;
        background: #F2DC05;
        text-align: center;
        margin: 25px 15px 0 20px;
        display: inline-block;
    }
    .interval h4{
        color: #fff;
    }
    .in{
        background: #2AAE5A;
    }
    .wait{
        background: #4A71E3;
    }
    .big-box{
        width: 100%;
        height: 80px;
    }
    .bg-box{
        width: 70px;
        height: 80px;
    }
    .current{
        margin:20px;
    }
    .attendance{
        background: #58A3F7;
        position: relative;
        margin: 0 0 0 20px;
    }
    .sty{
        font-size: 40px !important;
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .zh{
        display: inline-block;
    }
    .information{
        width: 150px;
        height: 80px;
        overflow: hidden;
        margin-left: 10px;
    }
    .information p,h3{
        margin: 8px 0 20px 0;
    }
    .late{
        background: #52C1F5;
    }
    .absence{
        background: #4BCED0;
    }
    .answer{
        background: #FB6260;
    }
</style>